<template>
  <div class="training-plans-container">
    <el-card shadow="never" class="header-card">
      <div class="page-header">
        <div class="header-content">
          <el-icon class="header-icon" :size="28"><Calendar /></el-icon>
          <div class="header-text">
            <h2>培训计划</h2>
            <p>企业培训项目管理</p>
          </div>
        </div>
        <div class="header-actions">
          <el-button type="primary" @click="showDialog = true">
            <el-icon><Plus /></el-icon>
            创建计划
          </el-button>
        </div>
      </div>
    </el-card>

    <!-- 培训统计 -->
    <div class="stats-row">
      <el-card shadow="hover" class="stat-card">
        <div class="stat-content">
          <el-icon class="stat-icon" :size="40" color="#409EFF"><List /></el-icon>
          <div class="stat-info">
            <div class="stat-value">{{ stats.total }}</div>
            <div class="stat-label">全部计划</div>
          </div>
        </div>
      </el-card>
      <el-card shadow="hover" class="stat-card">
        <div class="stat-content">
          <el-icon class="stat-icon" :size="40" color="#E6A23C"><Clock /></el-icon>
          <div class="stat-info">
            <div class="stat-value">{{ stats.ongoing }}</div>
            <div class="stat-label">进行中</div>
          </div>
        </div>
      </el-card>
      <el-card shadow="hover" class="stat-card">
        <div class="stat-content">
          <el-icon class="stat-icon" :size="40" color="#67C23A"><CircleCheck /></el-icon>
          <div class="stat-info">
            <div class="stat-value">{{ stats.completed }}</div>
            <div class="stat-label">已完成</div>
          </div>
        </div>
      </el-card>
      <el-card shadow="hover" class="stat-card">
        <div class="stat-content">
          <el-icon class="stat-icon" :size="40" color="#909399"><User /></el-icon>
          <div class="stat-info">
            <div class="stat-value">{{ stats.participants }}</div>
            <div class="stat-label">参与人数</div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 培训计划列表 -->
    <el-card shadow="never">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="我的计划" name="my" />
        <el-tab-pane label="全部计划" name="all" />
      </el-tabs>

      <el-table :data="filteredPlans" stripe>
        <el-table-column prop="name" label="计划名称" min-width="200" />
        <el-table-column prop="type" label="培训类型" width="120">
          <template #default="{ row }">
            <el-tag :type="getTypeTag(row.type)" size="small">
              {{ getTypeName(row.type) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="participants" label="参与人数" width="100" />
        <el-table-column label="培训周期" width="220">
          <template #default="{ row }">
            {{ row.startDate }} ~ {{ row.endDate }}
          </template>
        </el-table-column>
        <el-table-column prop="progress" label="进度" width="150">
          <template #default="{ row }">
            <el-progress :percentage="row.progress" :status="getProgressStatus(row.progress)" />
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)" size="small">
              {{ getStatusName(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250" fixed="right">
          <template #default="{ row }">
            <el-button link type="primary" @click="handleView(row)">
              <el-icon><View /></el-icon>
              查看
            </el-button>
            <el-button link type="success" @click="handleEdit(row)">
              <el-icon><Edit /></el-icon>
              编辑
            </el-button>
            <el-button link type="danger" @click="handleDelete(row)">
              <el-icon><Delete /></el-icon>
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 创建/编辑培训计划对话框 -->
    <el-dialog
      v-model="showDialog"
      :title="dialogTitle"
      width="700px"
      destroy-on-close
    >
      <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
        <el-form-item label="计划名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入培训计划名称" />
        </el-form-item>
        <el-form-item label="培训类型" prop="type">
          <el-select v-model="form.type" placeholder="请选择培训类型" style="width: 100%">
            <el-option label="新员工培训" value="onboarding" />
            <el-option label="技能提升" value="skill" />
            <el-option label="管理培训" value="management" />
            <el-option label="专业认证" value="certification" />
          </el-select>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="开始日期" prop="startDate">
              <el-date-picker
                v-model="form.startDate"
                type="date"
                placeholder="选择日期"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束日期" prop="endDate">
              <el-date-picker
                v-model="form.endDate"
                type="date"
                placeholder="选择日期"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="参与人员" prop="participants">
          <el-select v-model="form.participants" multiple placeholder="请选择参与人员" style="width: 100%">
            <el-option label="张三" value="1" />
            <el-option label="李四" value="2" />
            <el-option label="王五" value="3" />
            <el-option label="赵六" value="4" />
          </el-select>
        </el-form-item>
        <el-form-item label="培训内容" prop="description">
          <el-input v-model="form.description" type="textarea" :rows="4" placeholder="请输入培训内容描述" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showDialog = false">取消</el-button>
        <el-button type="primary" @click="handleSave">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Calendar, Plus, List, Clock, CircleCheck, User,
  View, Edit, Delete
} from '@element-plus/icons-vue'

// 状态
const activeTab = ref('my')
const showDialog = ref(false)
const formRef = ref(null)
const currentPlan = ref(null)

// 统计数据
const stats = reactive({
  total: 15,
  ongoing: 5,
  completed: 8,
  participants: 245
})

// 培训计划数据
const plans = ref([
  {
    id: 1,
    name: '2024年新员工入职培训',
    type: 'onboarding',
    participants: 25,
    startDate: '2024-01-15',
    endDate: '2024-02-15',
    progress: 60,
    status: 'ongoing'
  },
  {
    id: 2,
    name: 'Vue 3 技术培训',
    type: 'skill',
    participants: 15,
    startDate: '2024-01-10',
    endDate: '2024-01-30',
    progress: 75,
    status: 'ongoing'
  },
  {
    id: 3,
    name: '管理能力提升培训',
    type: 'management',
    participants: 10,
    startDate: '2024-01-01',
    endDate: '2024-01-15',
    progress: 100,
    status: 'completed'
  }
])

// 表单
const form = reactive({
  name: '',
  type: '',
  startDate: null,
  endDate: null,
  participants: [],
  description: ''
})

// 验证规则
const rules = {
  name: [{ required: true, message: '请输入计划名称', trigger: 'blur' }],
  type: [{ required: true, message: '请选择培训类型', trigger: 'change' }],
  startDate: [{ required: true, message: '请选择开始日期', trigger: 'change' }],
  endDate: [{ required: true, message: '请选择结束日期', trigger: 'change' }]
}

// 计算属性
const dialogTitle = computed(() => currentPlan.value ? '编辑培训计划' : '创建培训计划')

const filteredPlans = computed(() => {
  return plans.value
})

// 方法
const handleView = (plan) => {
  ElMessage.info('查看计划：' + plan.name)
}

const handleEdit = (plan) => {
  currentPlan.value = plan
  Object.assign(form, {
    name: plan.name,
    type: plan.type,
    startDate: plan.startDate,
    endDate: plan.endDate,
    participants: [],
    description: '培训内容描述...'
  })
  showDialog.value = true
}

const handleDelete = (plan) => {
  ElMessageBox.confirm('确定要删除该培训计划吗？', '提示', {
    type: 'warning'
  }).then(() => {
    const index = plans.value.findIndex(p => p.id === plan.id)
    if (index > -1) {
      plans.value.splice(index, 1)
    }
    ElMessage.success('删除成功')
  }).catch(() => {})
}

const handleSave = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      ElMessage.success('保存成功')
      showDialog.value = false
    }
  })
}

const getTypeName = (type) => {
  const map = {
    onboarding: '新员工培训',
    skill: '技能提升',
    management: '管理培训',
    certification: '专业认证'
  }
  return map[type] || type
}

const getTypeTag = (type) => {
  const map = {
    onboarding: '',
    skill: 'success',
    management: 'warning',
    certification: 'danger'
  }
  return map[type] || ''
}

const getStatusName = (status) => {
  const map = {
    pending: '未开始',
    ongoing: '进行中',
    completed: '已完成'
  }
  return map[status] || status
}

const getStatusType = (status) => {
  const map = {
    pending: 'info',
    ongoing: 'warning',
    completed: 'success'
  }
  return map[status] || ''
}

const getProgressStatus = (progress) => {
  if (progress === 100) return 'success'
  if (progress >= 60) return ''
  return 'exception'
}
</script>

<style scoped>
.training-plans-container {
  padding: 20px;
}

.header-card {
  margin-bottom: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-icon {
  color: #409EFF;
}

.header-text h2 {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

.header-text p {
  margin: 4px 0 0 0;
  font-size: 14px;
  color: #909399;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.stat-card {
  cursor: pointer;
  transition: all 0.3s;
}

.stat-card:hover {
  transform: translateY(-4px);
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
}
</style>

